<!doctype html>
<html>
<head>
	<title>newfile</title>
	<meta charset="UTF-8"/>
	<style>
	 /*去除浏览器默认*/
	body{
		font-family:"Microsoft YaHei";
	}
	body,dl,dd,p,h1,h2,h3,h4,h5,h6{
		margin:0;
		padding:0;
	}
	ol,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	img{
		border:none;
		margin:0;
		padding:0;
	}
	a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
	}
		
	/*   */
		/* css部分  */
		#box{
			position:relative;
			width:600px;
			height:450px;
			margin:60px auto;
		}
		img{
			width:600px;
			height:400px;
		}
		ul li{
			float:left;
		}
		#top ul{
			width:1000%;
			height:400px;
			/*overflow:hidden;*/
		}
		#top ul li{
			height:100%;
		}
		#bot ul{
			width:100%;
			height:50px;
			background-color:#bbb;
			
		}
		#bot ul li{
			width:100px;
			height:100%;
			font-size:18px;
			text-align:center;
			line-height:50px;
			border:1px solid #660000;
			box-sizing:border-box;
		}
		p{	
			position:absolute;
			width:30px;
			height:30px;
			font-size:18px;
			line-height:30px;
			background-color:#f60;
			text-align:center;
			opacity:0.5;
			z-index:999;
		}
		.back{
			background-color:#33ff00;
		}
		#box .left{
			top:185px;
			left:0;
		}
		#box .right{
			top:185px;
			right:0;
		}
		ul,p{
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div id="box"> 
		<div id="top">
			<ul class="topul">
				<li><img src="img/img (1).jpg" alt="" /></li>
				<li><img src="img/img (2).jpg" alt="" /></li>
				<li><img src="img/img (3).jpg" alt="" /></li>
				<li><img src="img/img (4).jpg" alt="" /></li>
				<li><img src="img/img (5).jpg" alt="" /></li>
				<li><img src="img/img (6).jpg" alt="" /></li>
			</ul>
		</div>
		<div id="bot">
			<ul class="botul">
				<li>蓝拳圣使</li>
				<li>男魔法师</li>
				<li>女魔法师</li>
				<li>元素圣灵</li>
				<li>女气功师</li>
				<li>暗街之王</li>
			</ul>
		</div>
		<p class="left"> < </p>
		<p class="right"> > </p>
	</div>
</body>

	<script>
		var oTpul=document.querySelector(".topul"),/*  getElementsByTagName   */
			oTopul=document.querySelectorAll(".topul li"),
			oBotli=document.querySelectorAll(".botul li"),
			oP=document.querySelectorAll("p"),
			lenth=oBotli.length,
			lentp=oP
		;
	/*	console.log(oBotli);    测试用*/

		for(var i=0;i<lenth;i++ ){
			oBotli[i].onmouseenter=function(){
				/*  console.log(this);  测试用*/
				this.className="back";
				
			}
			
			oBotli[i].onmouseleave=function(){
				/*  console.log(this);  测试用*/
				this.className=" ";
				
			}
		}
		for(var i=0;i<oP.length;i++){
			var num=0;
			oP[0].onclick=function(){
				/*   alert(左);     */
				++num;
				oTpul.style.marginLeft="-"+num*600+'px';
				/*console.log(oTpul);*/
			}
			
		}
		for(var i=0;i<oP.length;i++){
			var nu=0;
			oP[1].onclick=function(){
				++nu;
				oTpul.style.marginLeft=600*nu+'px';
				/*   alert(右);      */
			}
		}
	</script>
</html>